<!--
 * @Description: 后台管理布局
 * @Author: zhailei
 * @Date: 2021-06-02 13:38:08
 * @LastEditTime: 2021-09-17 11:10:33
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\layouts\AdminLayout.vue
-->
<template>
  <a-layout :class="['admin-layout', 'beauty-scroll', { mobile: isMobile }]">
    <drawer v-if="isMobile" v-model="drawerOpen">
      <side-menu
        :theme="theme.mode"
        :menuData="menuData"
        :collapsed="false"
        :collapsible="false"
        @menuSelect="onMenuSelect"
      />
    </drawer>
    <side-menu
      ref="sideMenu"
      :class="[fixedSideBar ? 'fixed-side' : '']"
      :theme="theme.mode"
      v-else-if="layout === 'side' || layout === 'mix'"
      :menuData="sideMenuData"
      :collapsed="collapsed"
      :collapsible="true"
      :isShowTitle="isShowTitle"
      :key="isRefresh"
    />
    <div
      v-if="fixedSideBar && !isMobile"
      :style="
        `width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`
      "
      class="virtual-side"
    ></div>
    <a-layout class="admin-layout-main beauty-scroll">
      <admin-header
        :headMenuIndex="headMenuIndex"
        :class="[
          {
            'fixed-tabs': fixedTabs,
            'fixed-header': fixedHeader,
            'multi-page': multiPage,
          },
        ]"
        :style="headerStyle"
        :menuData="headMenuData"
        :collapsed="collapsed"
        @toggleCollapse="toggleCollapse"
        @change="changeProject($event)"
      />
      <a-layout-header
        :class="[
          'virtual-header',
          {
            'fixed-tabs': fixedTabs,
            'fixed-header': fixedHeader,
            'multi-page': multiPage,
          },
        ]"
        v-show="fixedHeader"
      ></a-layout-header>
      <a-layout-content
        class="admin-layout-content"
        :style="`min-height: ${minHeight}px;`"
      >
        <div style="position: relative">
          <slot></slot>
        </div>
      </a-layout-content>
      <a-layout-footer style="padding: 0px">
        <page-footer :link-list="footerLinks" :copyright="copyright" />
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import AdminHeader from "./header/AdminHeader";
import PageFooter from "./footer/PageFooter";
import SideMenu from "../components/menu/SideMenu";
import Setting from "../components/setting/Setting";
import RouteView from "./RouteView.vue";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { triggerWindowResizeEvent, _getUUID } from "@/utils/util";
import store from "@/store";
import router from "@/router";

export default {
  name: "AdminLayout",
  components: { SideMenu, PageFooter, AdminHeader, Setting, RouteView },
  data() {
    return {
      minHeight: this.fixedTabs
        ? window.innerHeight - 25
        : window.innerHeight - 25 - 54,
      collapsed: false,
      showSetting: false,
      drawerOpen: false,
      isShowTitle: false,
      headMenuIndex: 0,
      wechatVisible: true,
      isProd: process.env.NODE_ENV === "production",
      //
      currentMenuItem: {},
      isRefresh: _getUUID(),
    };
  },
  provide() {
    return {
      adminLayout: this,
    };
  },
  watch: {
    $route(val) {
      this.setActivated(val);
      if (val.fullPath === "/system/portal/index") {
        this.wechatVisible = true;
      } else {
        this.wechatVisible = false;
      }
    },
    layout() {
      this.setActivated(this.$route);
    },
    isMobile(val) {
      if (!val) {
        this.drawerOpen = false;
      }
    },
    fixedTabs(val) {
      this.minHeight =
        val && !this.fixedHeader
          ? window.innerHeight - 25
          : window.innerHeight - 25 - 54;
    },
    fixedHeader(val) {
      this.minHeight =
        val && this.fixedTabs
          ? window.innerHeight - 25 - 54
          : val
          ? window.innerHeight - 25 - 54
          : window.innerHeight - 25;
    },
  },
  computed: {
    ...mapState("setting", [
      "isMobile",
      "theme",
      "layout",
      "footerLinks",
      "copyright",
      "fixedHeader",
      "fixedSideBar",
      "fixedTabs",
      "hideSetting",
      "multiPage",
    ]),
    ...mapGetters("setting", ["firstMenu", "subMenu", "menuData"]),
    sideMenuWidth() {
      // return this.collapsed ? "80px" : "256px";
      return this.collapsed ? "80px" : "230px";
    },
    headerStyle() {
      let width =
        this.fixedHeader && this.layout !== "head" && !this.isMobile
          ? `calc(100% - ${this.sideMenuWidth})`
          : "100%";
      let position = this.fixedHeader ? "fixed" : "static";
      return `width: ${width}; position: ${position};`;
    },
    headMenuData() {
      const { layout, menuData, firstMenu } = this;
      return layout === "mix" ? firstMenu : menuData;
    },
    sideMenuData() {
      const { layout, menuData, subMenu } = this;
      return layout === "mix" ? subMenu : menuData;
    },
  },
  methods: {
    ...mapMutations("setting", ["correctPageMinHeight", "setActivatedFirst"]),
    ...mapActions(["setSidebar"]),
    toggleCollapse() {
      this.collapsed = !this.collapsed;
      this.setSidebar(!this.collapsed);
      this.isShowTitle = !this.isShowTitle;
      triggerWindowResizeEvent();
    },
    changeProject(ev) {
      this.isRefresh = _getUUID();
      this.currentMenuItem = ev;
    },

    onMenuSelect() {
      this.toggleCollapse();
    },
    setActivated(route) {
      if (this.layout === "mix") {
        let matched = route.matched;
        matched = matched.slice(0, matched.length - 1);
        const { firstMenu } = this;
        firstMenu.forEach((menu, index) => {
          if (
            matched.findIndex(
              (item) => "/" + item.path.split("/")[1] === menu.fullPath
            ) !== -1
          ) {
            this.headMenuIndex = index;
            this.setActivatedFirst(menu.fullPath);
            store.commit("setting/setActivatedFirst", menu.fullPath);
            return;
          } else {
            if (index === 0) {
              this.headMenuIndex = 0;
              this.setActivatedFirst(menu.fullPath);
              store.commit("setting/setActivatedFirst", menu.fullPath);
            }
          }
        });
      }
    },
  },
  created() {
    this.correctPageMinHeight(this.minHeight - 24);
    this.setActivated(this.$route);
  },
  mounted() {
    let steps = [
      {
        element: "#guideStep1",
        text: "点击此处打开系统设置",
        position: "left",
      },
      {
        element: "#guideStep2",
        text: "在此设置整体风格",
        position: "left",
        trigger: {
          element: "#guideStep1", // 需要触发事件的id或者class
          maskName: ".ant-drawer-mask", // 点击后打开的弹框的遮罩id或者class，没有可不填
          maskWaitTime: 500, // 弹层遮罩弹出需要的时间（毫秒），用于高亮部分定位
          event: "click", // 需要触发的事件，暂无用处后续扩展
        },
      },
      {
        element: "#guideStep3",
        text: "在此可设置主题色",
        position: "left",
      },
      {
        element: "#guideStep4",
        text: "在此可设置导航模式等",
        position: "left",
      },
      {
        element: "#guideStep5",
        text: "其他设置",
        position: "left",
      },
      {
        element: "#guideStep6",
        text: "此处可以设置页面动画",
        position: "left",
      },
    ];
    // animatedSteering.setOptions({
    // 	steps:steps
    // })
    // animatedSteering.guide()
    window.onresize = () => {
      return (() => {
        this.minHeight =
          this.fixedTabs && !this.fixedHeader
            ? window.innerHeight - 25
            : window.innerHeight - 25 - 54;
      })();
    };
  },
  beforeDestroy() {
    this.correctPageMinHeight(-this.minHeight + 24);
  },
};
</script>

<style lang="less" scoped>
.admin-layout {
  .side-menu {
    &.fixed-side {
      position: fixed;
      height: 100vh;
      left: 0;
      top: 0;
    }
  }
  .virtual-side {
    transition: all 0.2s;
  }
  .virtual-header {
    transition: all 0.2s;
    opacity: 0;
    &.fixed-tabs.multi-page:not(.fixed-header) {
      height: 0 !important;
    }
  }
  .admin-layout-main {
    .admin-header {
      top: 0;
      right: 0;
      overflow: hidden;
      transition: all 0.2s;
      &.fixed-tabs.multi-page:not(.fixed-header) {
        // height: 0 !important;
      }
    }
  }
  .admin-layout-content {
    // padding: 20px 0px 0;
    /*overflow-x: hidden;*/
    // min-height: calc(100vh - 54px - 54px) !important;
  }
  .setting {
    background-color: @primary-color;
    color: @base-bg-color;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px @shadow-color;
  }
  &.mobile {
    .ant-table-content {
      overflow-x: auto;
    }
    .ant-table-body {
      min-width: 800px;
    }
  }
}
// 商务微信二维码
.wechatQRCode {
  width: 260px;
  background: white;
  padding: 10px;
  position: fixed;
  top: calc(50% - 184px);
  left: calc(50% - 160px);
  z-index: 999;
  box-shadow: 0 4px 12px #00000026;
}
.closeBtn {
  border: none;
  float: right;
}
.codeTitle {
  color: #f84666;
  font-weight: bold;
  font-size: 14px;
}
</style>
<style lang="less">
.mobile {
  .ant-table-content,
  .ant-table-scroll {
    overflow-x: auto;
  }
  .ant-table-body {
    min-width: 800px;
  }
  .footer {
    .version {
      position: relative;
      text-align: center;
    }
  }
  .tabs-container.affixed.fixed-header {
    left: 0;
    width: 100%;
  }
  .ant-layout.ant-layout-has-sider {
    flex-wrap: wrap;
    .ant-layout-sider {
      flex: 1 !important;
      max-width: 100% !important;
      width: 100% !important;
      padding-bottom: 20px;
    }
  }
  .ant-modal {
    width: 100% !important;
  }
  .table-page-search-wrapper .ant-form-inline .ant-form-item {
    margin-bottom: 10px !important;
  }
}
</style>
